<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../elementui/elementui.css" />
		<style>
			/* 整体布局优化 */
			#app {
				background: linear-gradient(135deg, #f8f9fa, #e9ecef);
				height: 100vh;
				padding: 20px;
				box-sizing: border-box;
			}

			.chat-form {
				background: rgba(255, 255, 255, 0.9);
				border-radius: 12px;
				box-shadow: 0 8px 30px rgba(0,0,0,0.1);
				backdrop-filter: blur(10px);
				height: calc(100% - 40px) !important;
				margin: 0;
			}

			/* 聊天内容区域 */
			.chat-content {
				padding: 20px !important;
				background: transparent;
				border: none !important;
			}

			/* 消息气泡样式 */
			.left-content .el-alert,
			.right-content .el-alert {
				max-width: 70%;
				border-radius: 15px !important;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1);
				border: none !important;
			}

			.left-content .el-alert {
				background: #fff;
				border-left: 4px solid #7B6CF8;
			}

			.right-content .el-alert {
				background: linear-gradient(135deg, #7B6CF8, #9A82F5);
				color: #fff !important;
				border-right: 4px solid #6B5CE8;
			}

			.text-content {
				font-size: 14px;
				line-height: 1.6;
				padding: 12px 18px !important;
			}

			/* 输入框区域 */
			.btn-input {
				padding: 15px 20px !important;
				background: rgba(255, 255, 255, 0.9);
				border-top: 1px solid #eee;
			}

			.el-input {
				border-radius: 25px !important;
				padding: 0 15px;
				transition: all 0.3s;
			}

			.el-input:hover {
				box-shadow: 0 2px 8px rgba(123, 108, 248, 0.1);
			}

			.el-input__inner {
				border: 1px solid #eee !important;
				height: 40px !important;
				border-radius: 25px !important;
			}

			.el-button {
				border-radius: 25px !important;
				background: linear-gradient(45deg, #7B6CF8, #9A82F5) !important;
				border: none !important;
				color: #fff !important;
				padding: 0 25px !important;
				height: 40px;
				transition: transform 0.2s;
			}

			.el-button:hover {
				transform: translateY(-2px);
				opacity: 0.9;
			}

			/* 滚动条美化 */
			.chat-content::-webkit-scrollbar {
				width: 6px;
			}

			.chat-content::-webkit-scrollbar-track {
				background: rgba(0,0,0,0.05);
			}

			.chat-content::-webkit-scrollbar-thumb {
				background: #7B6CF8;
				border-radius: 3px;
			}

			/* 动画效果 */
			.left-content, .right-content {
				animation: messageAppear 0.3s ease;
			}

			@keyframes messageAppear {
				from {
					opacity: 0;
					transform: translateY(10px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
		</style>
	</head>
	<body style="overflow-y: hidden;overflow-x: hidden;">
		<div id="app">
			<el-form class="detail-form-content chat-form" ref="ruleForm" label-width="0">
				<div class="chat-content">
					<div v-bind:key="item.id" v-for="item in dataList">
						<div v-if="item.ask" class="left-content">
							<el-alert class="text-content" :title="item.ask" :closable="false" type="success"></el-alert>
						</div>
						<div v-else class="right-content">
							<el-alert class="text-content" :title="item.reply" :closable="false" type="warning"></el-alert>
						</div>
						<div class="clear-float"></div>
					</div>
				</div>
				<div class="btn-input">
					<el-input style="flex: 1;margin-right: 10px;" v-model="ruleForm.ask" placeholder="发布" style="margin-right: 10px;" clearable></el-input>
					<el-button type="primary" @click="onSubmit">发布</el-button>
				</div>
			</el-form>
		</div>

		<!-- layui -->
		<script src="../../layui/layui.js"></script>
		<!-- vue -->
		<script src="../../js/vue.js"></script>
		<!-- elementui -->
		<script src="../../elementui/elementui.js"></script>
		<!-- 组件配置信息 -->
		<script src="../../js/config.js"></script>
		<!-- 扩展插件配置信息 -->
		<script src="../../modules/config.js"></script>
		<!-- 工具方法 -->
		<script src="../../js/utils.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data() {
					return {
						id: "",
						ruleForm: {},
						dataList: [],
						inter: null
					}
				},
				methods: {
					// 初始化
					init(id) {
						this.getList();
						this.id = id;
						var that = this;
						var inter = setInterval(function() {
							that.getList();
						}, 10000)
						this.inter = inter;
					},
					getList() {
						layui.http.request('chat/list', 'get', {
							userid: localStorage.getItem('userid'),
							sort: 'addtime',
							order: 'asc'
						}, (res) => {
							this.dataList = res.data.list;
						})
					},
					// 提交
					onSubmit() {
						if (!this.ruleForm.ask) {
							layer.msg('请输入内容', {
								time: 2000,
								icon: 5
							});
							return
						}
						layui.http.requestJson('chat/add', 'post', {
							userid: localStorage.getItem('userid'),
							ask: this.ruleForm.ask
						}, (res) => {
							this.getList();
						});
					}
				}
			})

			layui.use(['layer', 'element', 'http', 'jquery'], function() {
				var layer = layui.layer;
				var element = layui.element;
				var http = layui.http;
				var jquery = layui.jquery;
				app.init();
			});
		</script>
	</body>
</html>
